<template>
  <div class="home">
    <div class="layout">
      <Layout>
        <Header style="background:white">
          <Menu mode="horizontal" theme="dark" active-name="1"  style="background:white" >
            <div class="layout-logo">
                <img class="imgs" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551624718911&di=4a7004f8d71bd8da84d4eadf1b59e689&imgtype=0&src=http%3A%2F%2Fimg105.job1001.com%2Fupload%2Falbum%2F2014-10-15%2F1413365052_95IE3msH.jpg" alt="">
            </div>
            <div class="layout-nav">
                     <MenuItem name="1" style="color:black"> 
                         
                            <Dropdown>
        <a href="javascript:void(0)">
           {{userInfo}}
          
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
          
            <DropdownItem ><span @click="btn">退出登录</span></DropdownItem>
            
        </DropdownMenu>
    </Dropdown>
                        </MenuItem>
                        
          
            </div>
          </Menu>
        </Header>
        <Layout style="background:#232A41">
          <Sider hide-trigger :style="{ background: '#232A41' }">
            <Menu
              active-name="1-2"
              theme="light"
              width="auto"
              :open-names="['1']"
            >
              <Submenu name="1" style="background:#232A41">
                <template slot="title">
                  <Icon type="ios-navigate"></Icon>
                  试题管理
                </template>
                <MenuItem name="1-1">添加试题</MenuItem>
                <MenuItem name="1-2">试题分类</MenuItem>
                <MenuItem name="1-3">查看试题</MenuItem>
              </Submenu>
              <Submenu name="2" style="background:#232A41">
                <template slot="title">
                  <Icon type="ios-keypad"></Icon>
                  用户管理
                </template>
                <MenuItem name="2-1">添加用户</MenuItem>
                <MenuItem name="2-2">用户管理</MenuItem>
              </Submenu>
              <Submenu name="3" style="background:#232A41">
                <template slot="title">
                  <Icon type="ios-analytics"></Icon>
                  考试管理
                </template>
                <MenuItem name="3-1">添加考试</MenuItem>
                <MenuItem name="3-2">试卷列表</MenuItem>
              </Submenu>
              <Submenu name="4" style="background:#232A41">
                <template slot="title">
                  <Icon type="ios-analytics"></Icon>
                  班级管理
                </template>
                <MenuItem name="4-1">班级管理</MenuItem>
                <MenuItem name="4-2">教室管理</MenuItem>
                <MenuItem name="4-3">学生管理</MenuItem>
              </Submenu>
              <Submenu name="5" style="background:#232A41">
                <template slot="title">
                  <Icon type="ios-analytics"></Icon>
                  阅卷管理
                </template>
                <MenuItem name="5-1">待批班级</MenuItem>
              </Submenu>
              <router-view/>
            </Menu>
          </Sider>
          <Layout :style="{ padding: '0 24px 24px' }">
            <Breadcrumb :style="{ margin: '24px 0' }">
              <BreadcrumbItem>Home</BreadcrumbItem>
              <BreadcrumbItem>Components</BreadcrumbItem>
              <BreadcrumbItem>Layout</BreadcrumbItem>
            </Breadcrumb>
            <Content
              :style="{
                padding: '24px',
                minHeight: '280px',
                background: '#fff',
              }"
            >
        content
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '../api/login';
import Cookie from "js-cookie"
export default {
    data(){
        return{
            userInfo:JSON.parse(sessionStorage.getItem("userInfo"))    
        }
    },
    methods: {
      btn(){
      
        sessionStorage.removeItem("userInfo"),
        Cookie.remove("token")
        this.$router.push("/login")
      }
    },

  
   
};
</script>
<style scoped>
.layout {
   
  border: 1px solid #d7dde4;
  background: #ccc;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo{
    width: 100px;
    height: 30px;
 
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}


.imgs{
    width: 100px;
    height: 30px;
    margin-top: 15px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
  color: black;
}
</style>
